<template>
	<view>
		<view class="inv-top-menu-bar">
		  <view class="top-menu">
		    <view class="top-menu-list">
				<view :class="parseInt(item.active) === 1 ? 't-btn active' : 't-btn'" v-for="(item, index) in navList" :key="index" @click="handleNavActive(index)">
					{{ item.text }}
				</view>
		    </view>
		  </view>
		</view>
		<view v-if="navStatusIndex == 0">
			<JobFavorites></JobFavorites>
		</view>
		<view v-if="navStatusIndex == 1">
			<AttentionCompany></AttentionCompany>
		</view>
	</view>
</template>
<script>
	import JobFavorites from '@/personal/JobManagement/JobFavorites'
	import AttentionCompany from '@/personal/JobManagement/AttentionCompany'
	import {getParam} from '../utils/index.js'
	export default {
		components:{
			JobFavorites,
			AttentionCompany
		},
		data(){
			return {
				navTitle:'',
				navList: [{ // 导航列表
						text: '职位收藏夹',
						href: '/personal/JobManagement/JobFavorites',
						active: 1
					},
					{
						text: '关注的企业',
						href: '/personal/JobManagement/AttentionCompany',
						active: 0
					}
				],
				navStatusIndex:0 // 初始选中导航
			}
		},
		mounted() {
			// 选中当前导航菜单
			this.handleNavActive(parseInt(getParam().navStatus))
		},
		methods:{
			// 导航切换
			/*
				navIndex 当前点击导航下标
			*/
			handleNavActive(navIndex){
				this.navStatusIndex = navIndex 
				this.navList.forEach((item,index)=>{  
					item.active = 0 
				})
				this.navList[navIndex].active = 1
				
				switch (this.navStatusIndex) {
					case 0: 
						this.navTitle = '职位收藏夹'
					break
					case 1: 
						this.navTitle = '关注的企业'
					break
					default:
					break
				}
				uni.setNavigationBarTitle({
				    title: this.navTitle
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
.inv-top-menu-bar {
  background: #ffffff;
  .top-menu {
	overflow: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	&::-webkit-scrollbar {
	  display: none;
	}
  }
  .top-menu-list {
	white-space: nowrap;
	.t-btn {
	  position: relative;
	  white-space: nowrap;
	  display: inline-block;
	  text-align: center;
	  color: #666666;
	  font-size: 30rpx;
	  text-decoration: none;
	  padding: 26rpx 0;
	  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
	  width: 50%;
	  &::after {
		position: absolute;
		left: 50%;
		bottom: 10rpx;
		width: 32rpx;
		height: 6px;
		background-color: #1787fb;
		border-radius: 100%;
		transform: translate(-50%, 0);
	  }
	  &.active {
		color: #1787fb;
		&::after {
		  content: " ";
		}
	  }
	}
  }
}
</style>